import { useEffect, useRef, useState } from 'react';
import {
  View,
  Image,
} from '@tarojs/components';
import {
	setStorageSync,
} from '@/utils/util';
import './index.css';

const Guide = (props) => {
  const [step, setStep] = useState(1);
  const [isOpen, setIsOpen] = useState(false);

  return (
    <View
      className={`maskViews ${isOpen ? 'dark' : ''}`}
      catchTouchMove
      onClick={()=>{
        setIsOpen(true)
      }}
    >
      {
        isOpen ? (
          <View className='guide_view'>
            {
              step == 1 ? (
                <Image
                  src='https://jala-test-images.sndaurl.cn/images/step1.png'
                  className='guide_view_img'
                  mode='aspectFill'
                  onClick={()=>{setStep(2)}}
                />
              ) : null
            }
            {
              step == 2 ? (
                <Image
                  src='https://jala-test-images.sndaurl.cn/images/step2.png'
                  className='guide_view_img'
                  mode='aspectFill'
                  onClick={()=>{setStep(3)}}
                />
              ) : null
            }
            {
              step == 3 ? (
                <Image
                  src='https://jala-test-images.sndaurl.cn/images/step3.png'
                  className='guide_view_img'
                  mode='aspectFill'
                  onClick={()=>{
                    setStorageSync('hasGuide', true);
                    props.onClose && props.onClose();
                  }}
                />
              ) : null
            }
          </View>
        ) : null
      }
    </View>
  )
}

export default Guide;
